<template>
  <div>
    <ul class="title-nums">
      <li class="a" ref="isTrue" v-for="(item, index) in examlist" @click="backColor(item,index)"  :class="[index==currentPage?'blue':'',item.hasOwnProperty('nowanswer')?(JSON.parse(item.answers).join(',')==JSON.parse(item.nowanswer).join(',')?'green':'red'):'']" :key="index">
        {{ index |addZero }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  async mounted () {
    await this.getExam()
  },
  filters: {
    addZero (value) {
      return value < 9 ? "0" + (value + 1) : value + 1;
    }
  },
  methods: {
    ...mapMutations('examModule', ['SET_CURRENT']),
    ...mapActions('examModule', ['getExam']),
    backColor (i,index) {
      if(i.hasOwnProperty('nowanswer')&&JSON.parse(i.answers).join(',')==JSON.parse(i.nowanswer).join(',')){
        this.$refs.isTrue[index].style.backgroundColor = 'green'
      }else{
        this.$refs.isTrue[index].style.backgroundColor = 'red'
      }
    }
  },
  computed: {
    ...mapState('examModule', ['total', 'currentPage', 'examlist']),
    trueAnswers () {
      return JSON.parse(this.examlist[this.currentPage].answers).join(',')
    },
    currentAnswers () {
      return JSON.parse(this.examlist[this.currentPage].nowanswer).join(',')
    }
  }
}
</script>

<style scoped>
ul {
  list-style: none;
}

.a {
  float: left;
  width: 25px;
  height: 16px;
  border-radius: 11px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  margin: 6px;
  text-align: center;
  line-height: 16px;
  cursor: pointer;
  font-size: 12px;
}

.red {
  background-color: red;
  z-index: 998;
}

.green {
  background-color: green;
  z-index: 998;
}

.blue {
  background: #2400a5 !important;
  z-index: 999;
}
</style>